<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。 */

        input[type=text] {
            width: 130px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('http://static.runoob.com/images/mix/searchicon.png');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
        }

        input[type=text]:focus {
            width: 100%;
        }
    </style>
</head>

<body>

    <p>搜索输入框带动画:</p>

    <form>
        <input type="text" name="search" placeholder="搜索..">
    </form>

</body>

</html>